import * as YvanUI from "yvan-ui-wotu";

const _ = YvanUI.lodash

const React = YvanUI.React

interface Ref {
    theform: YvanUI.Form
    page11: YvanUI.Page
    ctlTitle: YvanUI.Text
    ctlDesc: YvanUI.Text
    ctlShen: YvanUI.Select
    ctlShi: YvanUI.Select
    ctlQu: YvanUI.Select
    ctlRepeat: YvanUI.Select
    repeatTypeDay: YvanUI.Select
    repeatTypeWeek: YvanUI.Select
    repeatTypeMonth: YvanUI.Select
    tasks: YvanUI.Repeat
}
let i = 0

export default class Dashboard extends YvanUI.Scope<void, Ref> {

    state = this.$$({
        title: '',
        desc: '没填',
        repeat: '',
        repeatOption: {
            time: '1,4,7',
            week: '2,4',
            month: '3 7'
        },
        area: {
            shen: '',
            shi: '',
            qu: ''
        },
        tasks: [
            {taskName: '任务1', taskType: 'A'},
            {taskName: '任务2', taskType: 'A'},
            {taskName: '任务3', taskType: 'B'}
        ]
    })

    controlState = this.$$({
        repeatSource: {
            data: [
                {value: 'A', label: '一级'},
                {value: 'B', label: '二级'},
                {value: 'C', label: '三级'},
            ]
        }
    })

    onAppendTask() {
    }

    onRemoveTask() {
    }

    onRender() {
        window['biz'] = this

        const me = this
        // this.autorun(() => {
        //     YvanUI.transaction(() => {
        //         me.refs.repeatTypeDay.props.vjson.visible = (me.state.repeat === 'day')
        //         me.refs.repeatTypeWeek.props.vjson.visible = (me.state.repeat === 'week')
        //         me.refs.repeatTypeMonth.props.vjson.visible = (me.state.repeat === 'month')
        //     })
        // })
        //
        // this.autorun(() => {
        //     YvanUI.transaction(() => {
        //         me.refs.ctlShi.props.vjson.disabled = (_.size(me.state.area.shen) <= 0)
        //         me.refs.ctlQu.props.vjson.disabled = (_.size(me.state.area.shi) <= 0 || _.size(me.state.area.shen) <= 0)
        //
        //         if (!me.state.area.shen) {
        //             me.state.area.shi = ''
        //             me.state.area.qu = ''
        //         }
        //
        //         if (!me.state.area.shi) {
        //             me.state.area.qu = ''
        //         }
        //     })
        // })
    }


    myClick(sender: YvanUI.Button) {
        sender.loading = true
        this.refs.theform.validateFields().then(res => {
            setTimeout(() => {
                YvanUI.showSuccessDialog("提交成功")
                sender.loading = false

            }, 2000)

        }).catch((e) => {
            YvanUI.showValidateErrorDialog(this.refs.theform!, e)
            this.refs.theform!.scrollToField(e.errorFields[0].name)
            sender.loading = false
        })
    }

    vjson = {
        view: 'page',
        // @ts-ignore
        title: '计划任务',
        subTitle: '展示一些常规的表单，包括验证、提示等等',
        ref: 'page11',
        $default: {
            // labelCol: {xs: {span: 24}, sm: {span: 8},},
            // wrapperCol: {xs: {span: 24}, sm: {span: 16},},
        },
        toolbar: [
            {
                view: 'button',
                text: '自定义按钮',
                icon: 'fa fa-save',
                onClick: () => {
                    // YvanUI.showInfo('OK')
                    this.state.desc = `吃饭？${i++}。了吗？`
                }
            }
        ],
        items: [
            {
                view: 'card',
                items: [
                    {
                        view: 'form',
                        // labelCol: {xs: {span: 24}, sm: {span: 8},},
                        // wrapperCol: {xs: {span: 24}, sm: {span: 16},},
                        // labelCol: {span: 4},
                        // wrapperCol: {span: 8},
                        ref: 'theform',
                        debug: 'state',
                        items: [
                            {
                                view: 'repeat',
                                label: '任务列表',
                                bind: 'state.tasks',
                                ref: 'tasks',
                                allowRemove: true,
                                loading: false,
                                onAppendChild: 'onAppendTask',
                                onRemoveChild: 'onRemoveTask',
                                items: [
                                    {
                                        label: '任务名称',
                                        view: 'text',
                                        bind: 'state.title',
                                        width: '300px',
                                        required: true
                                    },
                                    {
                                        label: '子任务名',
                                        view: 'text',
                                        bindChild: 'taskName',
                                        width: '300px',
                                        required: true
                                    },
                                    {
                                        label: '子任务类型',
                                        view: 'select',
                                        bindChild: 'taskType',
                                        width: '300px',
                                        // dataBind: 'controlState.repeatSource',
                                        required: true,
                                        dataSource: () => [
                                            {value: 'A', label: '一级'},
                                            {value: 'B', label: '二级'},
                                            {value: 'C', label: '三级'},
                                        ]
                                    }
                                ]
                            },
                            {
                                view: 'text',
                                label: '任务名称',
                                bind: 'state.title',
                                ref: 'ctlTitle',
                                required: true,
                            },
                            {
                                view: 'text',
                                label: '任务描述',
                                bind: 'state.desc',
                                ref: 'ctlDesc',
                                required: true,
                            },
                            {
                                view: 'select',
                                label: '任务频率',
                                bind: 'state.repeat',
                                ref: 'ctlRepeat',
                                required: true,
                                data: [
                                    {label: '不重复', value: ''},
                                    {label: '每天', value: 'day'},
                                    {label: '每周', value: 'week'},
                                    {label: '每月', value: 'month'}
                                ]
                            },
                            {
                                view: 'select',
                                label: '每天几点',
                                bind: 'state.repeatOption.time',
                                ref: 'repeatTypeDay',
                                mode: "multiple",
                                data: Array.from({length: 24}, (v, index) => ({
                                    value: index,
                                    label: `${index}:00`
                                }))
                            },
                            {
                                view: 'select',
                                label: '每周几执行',
                                bind: 'state.repeatOption.week',
                                ref: 'repeatTypeWeek',
                                mode: "multiple",
                                data: [
                                    {label: '周一', value: '1'},
                                    {label: '周二', value: '2'},
                                    {label: '周三', value: '3'},
                                    {label: '周四', value: '4'},
                                    {label: '周五', value: '5'},
                                    {label: '周六', value: '6'},
                                    {label: '周日', value: '0'},
                                ]
                            },
                            {
                                view: 'select',
                                label: '每月几号执行',
                                bind: 'state.repeatOption.month',
                                ref: 'repeatTypeMonth',
                                mode: "tags",
                                valueSpliter: ' ',
                                data: Array.from({length: 31}, (v, index) => ({
                                    value: index + 1,
                                    label: `${((index + 1) / 100).toFixed(2)}日`.substr(-3)
                                }))
                            },
                            {
                                view: 'text',
                                label: '省',
                                bind: 'state.area.shen',
                                ref: 'ctlShen',
                            },
                            {
                                view: 'text',
                                label: '市',
                                bind: 'state.area.shi',
                                ref: 'ctlShi',
                            },
                            {
                                view: 'text',
                                label: '区',
                                bind: 'state.area.qu',
                                ref: 'ctlQu',
                            },
                            {
                                view: 'row',
                                items: [
                                    {
                                        view: 'col',
                                        span: 24,
                                        items: [
                                            {
                                                view: 'textarea',
                                                label: '备注',
                                                bind: 'state.desc',
                                                required: true,
                                            }
                                        ]
                                    }
                                ]
                            },
                            {
                                view: "treeSelect",
                                label: '下拉树',
                                // data: [
                                //     {label: "w1", value: "w1", parentValue: ""},
                                //     {label: "w2", value: "w2", parentValue: "w1"},
                                //     {label: "w3", value: "w3", parentValue: "w2"},
                                //     {label: "w4", value: "w4", parentValue: "w1"},
                                //     {label: "w5", value: "w5", parentValue: ""},],
                                dataSource: {
                                    func: function () {
                                        return [
                                            {label: "vv1", value: "w1", parentValue: ""},
                                            {label: "vv2", value: "w2", parentValue: "w1"},
                                            {label: "vv3", value: "w3", parentValue: "w2"},
                                            {label: "vv4", value: "w4", parentValue: "w1"},
                                            {label: "vv5", value: "w5", parentValue: ""},];
                                    },
                                }
                            }
                        ]
                    },
                ]
            }
        ],
        footer: [
            {
                view: 'button',
                text: '提交',
                type: 'primary',
                icon: 'fa fa-save',
                onClick: this.myClick
            },
            {
                view: 'button',
                text: '清空',
                icon: 'fa fa-times',
                onClick: () => {
                    this.refs.theform.resetFields()
                }
            }
        ]
    }
}